  <template>
    <div class="login">
        <div class="login_bg">
            <div class="demo-input-suffix">
                账号：
                <el-input
                    class="login_import"
                    placeholder="请输入名称"
                    prefix-icon="el-icon-search"
                    v-model="input1">
                </el-input>
            </div>    
            <div class="demo-input-suffix">
                密码：
                <el-input
                    class="login_import"
                    placeholder="请输入密码"
                    prefix-icon="el-icon-search"
                    v-model="input2">
                </el-input>
            </div>  
            <div class="login_btn_suffix">
                <el-button type="primary" 
                class="login_btn"
                @click="loginBtn">登录</el-button> 
            </div>
            
        </div>
    </div>
    
  
</template>

<script>
import axios from 'axios';
import { login } from '@/api/user';

    export default {
        beforeMount(){
            // var token = this.getToken()
            // console.info("token = {}",token);
            // if (undefined != token && null != token) {
            //     this.$router.push('/main');
            // }
        },
        mounted() {
            console.info("mounted...");
        },
        data() {
            return {
                input1: '',
                input2: '',
                baseUrl: 'http://127.0.0.1:8414/vv',
            };
        },
        methods: {
            loginBtn(){

                try {
                    const dataReq = {
                        name: this.input1,
                        password: this.input2,
                    };
                    // 使用JSON.parse()将JSON字符串转换为对象
                    // let userInfo  = JSON.parse(getUserInfo());
                    // console.info(userInfo.userId,"userInfo");
                    const data = login(dataReq)
                    data.then((result) => {
                        console.info('result', result);
                        if (result.code === 0) {
                            this.$message({
                                message: '登录成功',
                                type: 'success'
                            });
                            this.storeToken(result.data);
                            this.$router.push('/main');
                        } else {
                            this.$message({
                                message: result.message,
                                type: 'success'
                            });
                        }
        
                    })

                } catch (error) {
                    // 这里的错误已经被 Axios 拦截器处理并弹出通知框
                    console.error('请求失败', error);
                }
                this.$router.push('/main');
                // var login_success  = false;
                // var loginUrl=this.baseUrl+'/userRegisterInfo/login';
                // 创建请求的数据对象
                // const data = {
                //     name: this.input1,
                //     password: this.input2,
                // };
                // console.info(data)
                // axios.post(loginUrl,data)
                // .then(response => {
                //     // this.tableData = response.data.data;
                //     console.info("返回结果",response.data)
                //     const responseDataCode = response.data.code;
                //     if (responseDataCode === 0) {
                //         login_success = true;
                //         this.$message({
                //             message: '登录成功',
                //             type: 'success'
                //         });
                //         this.storeToken(response.data.data);
                //         this.$router.push('/main');
                //     } else {
                //         this.$message.error(response.data.message);
                //     }
                // })
                // .catch(error => {
                //     console.error('请求用户数据出错:', error);
                //     this.$message.error("网络连接异常");
                // });

            },
            // 存储token
            storeToken(token) {
                localStorage.setItem('token', token);
            },       
            // 获取token
            getToken() {
                return localStorage.getItem('token');
            }
        }
    }
</script>

<style>

.demo-input-suffix {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.login_import {
    width: 300px;
}
.login_bg {
    border: 2px solid rgb(187, 180, 180); 
    width: 500px;
    padding: 40px;
    border-radius: 10px;
}

.login_btn_suffix {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.login_btn {
    width: 380px;
}
.login {
    display: flex;
    justify-content: center;
    align-items: center; 
    width: 100%;
    height: 100vh; /* 使容器的高度为视口高度 */
}

</style>
